<template>
  <div class="flow-page">
    <VueFlow style="height: 825px" :nodes="nodes" :edges="edges">
      <Background bgColor="#EEEEEE" />
      <template #node-custom="customNodeProps">
        <commonNode v-bind="customNodeProps" />
      </template>
    </VueFlow>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import commonNode from './components/commonNode.vue'

const nodes = ref([
  {
    id: '1',
    type: 'custom',
    position: { x: 350, y: 50 }
  },
  {
    id: '2',
    type: 'default',
    position: { x: 425, y: 250 },
    data: { label: '输入' }
  }
])
const edges = ref([
  {
    id: 'e1-2',
    source: '1',
    target: '2'
  }
])
</script>

<style>
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
</style>
<style scoped>
.flow-page {
  position: unset;
  min-height: 100%;
  overflow-y: auto;
}
</style>
